<template>
    <div>
        <div class='content2'>
            <div class='right1'>
                <div class='tit'></div>
                <div class='tit-'>
                    <div class='tit-2'>工序或场所</div>

                    <div class='tit-3'>危险部位及危险源</div>
                    <div class='tit-4'>事故及伤害类型</div>
                    <div class='tit-1'>风险等级</div>
                    <div class='tit-5'>控制措施</div>
                </div>

                <div class='cell'>
                    <div id='schart15' :style="{ marginTop: marginTop + 'px' }">
                        <li class='li1' v-for='(value, index) in realData' :key='index' @click='handleUpdate(index)'>
                            <div class='name1'>{{ value.process }}</div>
                            <div class='name2'>{{ value.hazard }}</div>
                            <div class='name3'>{{ value.types }}</div>
                            <div class='name4'>{{ value.grade }}</div>
                            <div class='name5'>{{ value.measures }}</div>
                        </li>
                    </div>
                    <div id='schart155' :style="{ marginTop1: marginTop1 + 'px' }">
                        <li class='li1' v-for='(value, index) in realData' :key='index' @click='handleUpdate(index)'>
                            <div class='name1'>{{ value.process }}</div>
                            <div class='name2'>{{ value.hazard }}</div>
                            <div class='name3'>{{ value.types }}</div>
                            <div class='name4'>{{ value.grade }}</div>
                            <div class='name5'>{{ value.measures }}</div>
                        </li>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';

export default {
    components: { Pagination },
    directives: { waves },

    data() {
        return {
            realData: [],
            marginTop: 0, // 数据的margin-top
            marginTop1: 0
        };
    },
    created() {
        // this.timer = setInterval(this.showNotice, 100); //100表示间隔时间，数字越大滚得越快
        this.timer = setInterval(this.fun, 1);
    },
    methods: {
        fun() {
            var me = this;
            this.marginTop1 = me.datacount * 150 + 818;
            this.marginTop -= 0.1;
            this.marginTop1 -= 0.1;
            var count = me.datacount * 150;
            if (this.marginTop < -count) {

                this.marginTop = 0;
                this.marginTop1 = me.datacount * 150 + 818;
            }
        }
    },
    mounted() {
        var me = this;
        ajax('RiskIdentify/FindRiskIdentify', {}, function(data) {


            me.datacount = data.length;

            me.realData = data;
        });
    }
};
</script>
<style scoped>
.li1 {
    display: flex;
    align-items: center;
    width: 100%;
    height: 150px;
    list-style: none;
    color: rgba(215, 244, 255, 1);
    font-size: 18px;
    border-bottom: 1px solid #68b7d6;
}

#schart15 {
    float: left;
    width: 1900px;
    /* height: 818px; */
    /* position: absolute;
    top:0; */
    /* background: cyan; */
    /* background: rgb(127, 127, 212); */
}

#schart155 {
    float: left;
    width: 1900px;

}

.cell {
    float: left;
    width: 1880px;
    height: 818px;
    overflow: hidden;
    overflow-y: auto;
}

.name1,
.name2,
.name4,
.name5,
.name3 {
    float: left;
    /* height: 140px; */
    text-align: center;
    position: relative;
    top: 10%;
    transform: translateY(-50%);
    /* line-height: 150px; */
}

.name1 {
    width: 200px;
    /* line-height: 75px; */
}

.name2 {
    width: 160px;

}

.name4 {
    width: 100px;
}

.name5 {
    align-items: center;
    width: 1240px;
    padding: 0 20px;
    /* line-height: 50px; */
}

.name3 {

    width: 140px;

}

.name4 {
    float: left;
    margin-top: 5px;
    width: 100px;

}

.tit- {
    /* margin-top: 8px; */
    /* margin-bottom: 5px; */
    width: 1876px;
    border-bottom: 1px solid #68b7d6;
    float: left;
    height: 39px;
}

.tit-1 {
    width: 100px;

    /* background: brown; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
    line-height: 20px;
    text-align: center;
}

.tit-4 {
    width: 140px;

    /* background: brown; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
    line-height: 20px;
    text-align: center;
}

.tit-5 {
    width: 1272px;

    /* background: brown; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
    line-height: 20px;
    text-align: center;
}

.tit-2 {
    width: 200px;

    /* background: blueviolet; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
    line-height: 20px;
    text-align: center;
}

.tit-3 {
    text-align: center;
    width: 160px;

    /* background: chocolate; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
    line-height: 20px;
}

.tit {
    text-indent: 5px;
    margin-top: 10px;
    width: 94%;
    float: left;
    margin-left: 3%;
    /* font-size:20px; */
    line-height: 30px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(133, 188, 241, 1);
    height: 30px;
}

.right1 {
    width: 1900px;
    height: 879px;
    margin-left: 12px;
}


div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

div::-webkit-scrollbar-track {
    background: rgb(20, 44, 109);
}

div::-webkit-scrollbar-thumb {
    background: #68b7d6;
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
    background: rgb(92, 153, 211);
}

div::-webkit-scrollbar-corner {
    background: #179a16;
}


.content2 {
    height: 879px;
    width: 1900px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: url(../../assets/img/ga.png) no-repeat;
    background-size: 100% 100%;
}
</style>